<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
	</head>
	<body>
		<!-- form表示一种作用范围
		 主要作用：收集用户信息
		 常用属性：
		 action：指定页面信息提交的目的地-->
		<form action="http://www.baidu.com" method="get">
			<!-- input组件
			 常用属性
			  name:传递数据的名字
			  type：text 表示文本框
					password 表示密码框	
					radio表示单选钮 一组单选钮的name属性值要相同
					checkbox：复选钮 一组复选钮的name属性值要相同
					date：日期
					email邮件  提交时会校验邮箱格式
					file：文件
					number：数字
					submit：提交
					reset：重置
					-->
			<!-- 其它属性
				 placeholder：提示文本
				 required:必填项  若不填写，提交时会阻塞
				 disabled="disabled"表示禁用，无法更改它的值且在使用时提交不会进行数据传输
				 readonly="readonly" 表示只读，无法更改该表单中的数据，但是并不影响数据传输-->
			用户名：<input type="text" name="username" required="required" placeholder="请输入用户名" /><br />
			密码：<input type="password" name="userpwd" value="123" disabled="disabled" /><br />
			性别：
			<label>
				<input type="radio" name="sex" value="1" />男
			</label>
			<label>
				<input type="radio" name="sex" value="2" />女<br />
			</label>
			兴趣爱好：
			<input type="checkbox" name="intre" value="1" />唱歌
			<input type="checkbox" name="intre" value="2" />跳舞
			<input type="checkbox" name="intre" value="3" />游泳
			<input type="checkbox" name="intre" value="4" />骑行<br />
			出生日期：<input type="date" name="birth" /><br />
			邮箱：<input type="email" name="email" /><br />
			星座：
			<!-- select option 表示下拉框-->
			<select name="star">
				<option value="1">水瓶</option>
				<option value="2">双鱼</option>
				<option value="3">白羊</option>
				<option value="4">金牛</option>
				<option value="5">双子</option>
				<option value="6">狮子</option>
				<option value="7">仙女</option>
				<option value="8">天秤</option>
				<option value="9">射手</option>
				<option value="10">天蝎</option>
				<option value="11">摩羯</option>
				<option value="12">巨蟹</option>
			</select><br />
			获奖证书：
			<input type="file" name="file" /><br />
			年龄：<input type="number" /><br />
			个人介绍：
			<textarea cols="30" rows="10"></textarea>
			<!-- 在html以后推荐使用button代替input type=submit
			 若不想button作为提交按钮，可以设置button的type属性为button 
			 -->
			<!-- <input type="submit" value="注册" /> -->
			<button><img width="100px" height="50px" src="img/doc/dct1.jpeg"></button>
			<input type="reset" value="重置" />
		</form>
	</body>
</html>
